/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:12
 * @LastEditTime: 2022-08-30 15:24:12
 */
import { useEffect } from 'react';

import ReactBpmn from '@/components/Bpmn';
import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'; // 右边工具栏样式
import './index.scss';
import { notification } from 'antd';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import xmlStr from './sources/xml';

const ReactBpmnDesign = () => {
  let bpmnModelerObj = null;

  const success = () => {
    console.log('创建成功!');
  };

  const createNewDiagram = () => {
    // 将字符串转换成图显示出来
    console.log('diagram', bpmnModelerObj);
    bpmnModelerObj?.importXML(xmlStr, (err) => {
      if (err) {
        console.error('import', err);
        notification.error({
          message: '提示',
          description: '导入失败'
        });
      } else {
        // 这里是成功之后的回调, 可以在这里做一系列事情
        success();
      }
    });
  };
  useEffect(() => {
    bpmnModelerObj = new BpmnModeler({
      container: '#canvas', // 添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        // 右边的属性栏
        propertiesProviderModule,
        propertiesPanelModule
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      },
      height: '100%',
      width: '100%'
    });
    createNewDiagram();
  }, []);
  return (
    <div className="bpmn-container">
      <ReactBpmn />
      <div id="js-properties-panel" className="panel"></div>
    </div>
  );
};

export default ReactBpmnDesign;
